<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>控制设备</title>
  <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  <style>
    html,
    body {
      background-color: #F5F6F6;
    }

    .content {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      left: 0;
      top: 2px;
      width: 100%;
      height: auto;
      box-sizing: border-box;
      transition: all .3s;
    }

    .content table {
      width: 100%
    }

    .content td {
      border-bottom: 1px solid #DFE0E0;
      height: 60px;
    }

    .content td:nth-child(1) {
      padding-left: 10px;
    }

    .content td:nth-child(1) p:nth-child(2) {
      color: #555555
    }

    .content {
      background-color: #F5F6F6;
    }

    .content {
      opacity: 1;
      visibility: visible;
    }

    .Add {
      height: 40px;
      width: 96%;
      background-color: #1ABC9C;
      color: white;
      text-align: center;
      font-size: 15px;
      margin-top: 20px;
      outline: none;
    }

    .fontcolr {
      color: #cccccc
    }

    .clickfont {
      color: #72EDD1
    }

    table,
    th,
    td {
      height: 32px;
      width: 300px;
      border: 1px solid #abbac3;
    }

    table tr:hover {
      background-color: #dafdf3;
    }

    table tr:nth-child(even) {

      background: #dafdf3;

    }

    .control {
      background-color: #dcdcdc26;
      height: 968px;
      padding: 10px;
      font-size: 20px;
      border: 1px solid darkgray;
      margin: 0px 10px;
    }


    .hufbor {
      position: absolute;
      background-color: red;
      width: 25px;
      height: 25px;
      border-radius: 0px 0px 25px 0px;
    }

    .hufbors {
      position: absolute;
      background-color: #1abc9c;
      width: 25px;
      height: 25px;
      border-radius: 0px 0px 25px 0px;
    }

    .yuan {
      background-color: #1abc9c;
      height: 40px;
      width: 340px;
      border-radius: 30px 30px 0 0;
      text-align: center;
      font-size: 20px;
      line-height: 50px;
      color: #ffffff;
      margin-top: -20px;
    }

    table tr:nth-child(even) {

      background: #dafdf3;

    }

    .one {
      width: 337px;
      height: 95%;
      border: 1px solid #616366;
      background-color: #fff;
    }

    table,
    th,
    td {
      height: 32px;
      width: 258px;
      border: 1px solid #abbac3;
    }

    table tr:hover {
      background-color: #dafdf3;
    }

    table tr:nth-child(even) {

      background: #dafdf3;

    }

    .mode {
      background-color: #dcdcdc26;
      height: 100px;
      padding: 10px;
      font-size: 20px;
      border: 1px solid darkgray;
      margin: 10px;
    }

    .control {
      background-color: #dcdcdc26;
      height: 968px;
      padding: 10px;
      font-size: 20px;
      border: 1px solid darkgray;
      margin: 0px 10px;
    }

    .name {
      margin-bottom: 0px;
      border-radius: 30px 30px 0px 0px;
      background-color: #009688;
      font-size: 1.5rem;
      color: white;
      text-align: center;
      padding: 10px;
      height: 35px;
    }

    .conten1 {
      background-color: white;
      color: black;
      height: 100%;
      /* border: 1px solid black; */
    }

    .hufbor {
      position: absolute;
      background-color: red;
      width: 25px;
      height: 25px;
      border-radius: 0px 0px 25px 0px;
    }

    .btnclos {
      margin-left: 1px;
      margin-top: 10px;
      background-color: #FF0000;
      color: white;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      outline: none;
      border: none;
    }

    .btn {
      margin-left: 1px;
      margin-top: 10px;
      background-color: #009688;
      color: white;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      outline: none;
      border: none;
    }

    .num {
      font-size: 35px;
      color: orange;
      position: absolute;
      top: 129px;
    }

    .rad {
      margin-left: 60px;
      width: 27%;
    }

    .choose {
      margin-left: 10px;
    }

    .fon {
      margin-left: 20px;
    }

    .tabll {
      width: 90%;
      text-align: center;
      margin-left: 18px;
      margin-top: 10px;
    }

    .times {
      text-align: center;
      vertical-align: middle;
    }

    .num1 {
      width: 30px;
    }

    .num2 {
      width: 50px;
    }

    .bg {
      margin: 20px auto auto 15px;
    }

    .button {
      background-color: #1abc9c;

      /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 15px;
      border: 5px solid white;
      font-size: 16px;
      font-family: "FangSong";
      outline: none;
    }

    [v-clock] {
      display: none;
    }

    .layui-btn-red {
      background-color: red;
      color: #fff;
    }

    .layui-btn-danger {
      background-color: #009688;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="content">
    <table id="" style="position: fixed; top: 0;z-index: 99999;">
      <tr style="background-color:#e6e6e6;width: 100%">
        <td style="height: 10px;">
          <p style="font-size: 16px;color:rgb(12, 4, 4);font-weight: 500;" id="projectname"></p>
        </td>
        <!--<td width="100"><p class="fontcolr"></p></td>
					<td width="30"></td>-->
      </tr>
      <!--	<tr v-for="(s,index) in sjd">			
					<td><p style="font-weight: 800;font-size: 18px;"></p></td>
					<td width="100">	
					<p class="fontcolr">
						2019-10-10
					</p></td>
					<td width="30"><img src="../../image/right.png" height="30%"  @click="data(s.id,s.dataName)"/></td>
				</tr>-->
    </table>
  </div>

  <div style="margin-top: 80px;height: 100%;" id="sjd" v-clock>
    <div v-for="(contents,index) in contentlist"
      style="width: 90%;height: 70%;text-align: center;margin-left: 4%;margin-top: 0%;float: left;margin-bottom: 5%;">
      <div class="yuan">
        {{contents.name}}
      </div>
      <div class="one">
        <!-- <div class="hufbor" id="hufbors"></div> -->
        <div class="conten1">
          <!-- <div class="hufbor" id="hufbor"></div> -->
          <input type="button" @click="change($event,contents.ipandprot)" value="开" class="btn">
          <input type="button" @click="changeoff($event,contents.ipandprot)" value="关" class="btnclos">
          <!-- <span class="fon">阈值:{{contents.threshold}}</span> -->


          <table class="tabll">
            <tr>
              <th class="num2"></th>
              <th class="times">寄存地址</th>
              <th class="times">寄存名称</th>
              <th class="times">操作</th>
            </tr>
            <tr>
              <td class="num1">1</td>
              <td>{{contents.number_one}}</td>
              <td>{{contents.number_one_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs  layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_one)">开启
                </button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_one)">关闭</button>
              </td>
            </tr>
            <tr>
              <td class="num1">2</td>
              <td>{{contents.number_two}}</td>
              <td>{{contents.number_two_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_two)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_two)">关闭</button>
              </td>
            </tr>
            <tr>
              <td class="num1">3</td>
              <td>{{contents.number_three}}</td>
              <td>{{contents.number_three_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs  layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_three)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_three)">关闭</button>
              </td>
            </tr>
            <tr>
              <td class="num1">4</td>
              <td>{{contents.number_four}}</td>
              <td>{{contents.number_four_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_four)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_four)">关闭</button>
              </td>
            </tr>
            <tr>
              <td class="num1">5</td>
              <td>{{contents.number_five}}</td>
              <td>{{contents.number_five_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_five)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_five)">关闭</button>
              </td>
            </tr>
            <tr>
              <td class="num1">6</td>
              <td>{{contents.number_six}}</td>
              <td>{{contents.number_six_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_six)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_six)">关闭</button>
              </td>
            </tr>
            <tr>
              <td class="num1">7</td>
              <td>{{contents.number_seven}}</td>
              <td>{{contents.number_seven_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_seven)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_seven)">关闭</button>
              </td>
            </tr>
            <tr>
              <td class="num1">8</td>
              <td>{{contents.number_eight}}</td>
              <td>{{contents.number_eight_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_eight)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_eight)">关闭</button>
              </td>
            </tr>
            <tr v-if="contents.model == 12">
              <td class="num1">9</td>
              <td>{{contents.number_nine}}</td>
              <td>{{contents.number_nine_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_nine)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_nine)">关闭</button>
              </td>
            </tr>
            <tr v-if="contents.model == 12">
              <td class="num1">10</td>
              <td>{{contents.number_tenth}}</td>
              <td>{{contents.number_tenth_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_tenth)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_tenth)">关闭</button>
              </td>
            </tr>
            <tr v-if="contents.model == 12">
              <td class="num1">11</td>
              <td>{{contents.number_eleven}}</td>
              <td>{{contents.number_eleven_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_eleven)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_eleven)">关闭</button>
              </td>
            </tr>
            <tr v-if="contents.model == 12">
              <td class="num1">12</td>
              <td>{{contents.number_twelve}}</td>
              <td>{{contents.number_twelve_name}}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-red"
                  @click="start_reg(contents.ipandprot,contents.number_twelve)">开启</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger"
                  @click="stop_reg(contents.ipandprot,contents.number_twelve)">关闭</button>
              </td>
            </tr>

          </table>
        </div>
      </div>
    </div>


  </div>

</body>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script>
  apiready = function () {
    var projectname = $api.getStorage('selectpor').projectName;
    $("#projectname").text(projectname);
    var user = $api.getStorage('userSession');
    var departid = $api.getStorage('selectpor').id
    //项目下数据点
    var IP = "";
    //	alert(1)

    var app = new Vue({
      el: '#sjd',
      data: {
        selected: -1,
        contentlist: []
      },
      created: function () {
        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "mobile/lighting/findAlls.json",
          data: {
            area: departid
          },
          dataType: "json", //返回数据形式为json
          success: function (result) {
            console.log(JSON.stringify(result))
            for (var i = 0; i < result.data.length; i++) {
              app.contentlist.push(result.data[i])
            }
          }
        });
      },
      methods: {

        //点击开触发
        change: function (btn, id) {
          if ($(btn.currentTarget).val() == '开') {
            api.showProgress({
              title: '下发指令中，请稍后...',
              modal: false
            });              //添加laoding,0-2两种方式
            $.ajax({
              type: "post",
              //async : false, //同步执行
              timeout: 20000,

              url: BaseServiceUrl + "mobile/equipmenContro/startlight.json",
              data: {
                ipandprot: id
              },
              dataType: "json",                           //返回数据形式为json
              success: function (res) {
                if (res.result == "OK") {
                  alert("操作成功！");
                  api.hideProgress();
                } else if (res.result == "WrongDevice") {
                  alert("设备不在线，请检查设备，或者重启设备！");
                  api.hideProgress();
                } else if (res.result == "Timeout") {
                  alert("指令已经下达，设备无反馈，请检查设备! ");
                  api.hideProgress();
                } else {
                  alert("开启失败！请重试! ");
                  api.hideProgress();
                }
                api.hideProgress();
              }, error: function (xhr, ajaxOptions, thrownError) {
                if (thrownError == "timeout") {
                  alert("操作超时请重试！");
                } else if (thrownError == "Failed") {
                  alert("开启失败！请重试！");
                } else {
                  alert("设备不在线请稍后重试！");
                }
                layer.close(index);                        //返回数据关闭loading
              }
            });
          }
        },


        // 点击关触发
        changeoff: function (btn, id) {
          // alert(key)
          if ($(btn.currentTarget).val() == '关') {
            api.showProgress({
              title: '下发指令中，请稍后...',
              modal: false
            });
            $.ajax({
              type: "post",
              //async : false, //同步执行
              timeout: 20000,
              url: BaseServiceUrl + "mobile/equipmenContro/offlight.json",
              data: {
                ipandprot: id
              },
              dataType: "json",                                 //返回数据形式为json
              success: function (res) {
                if (res.result == "OK") {
                  alert("操作成功！");
                  api.hideProgress();
                } else if (res.result == "WrongDevice") {
                  alert("设备不在线，请检查设备，或者重启设备！");
                  api.hideProgress();
                } else if (res.result == "Timeout") {
                  alert("指令已经下达，设备无反馈，请检查设备! ");
                  api.hideProgress();
                } else {
                  alert("关闭失败！请重试! ");
                  api.hideProgress();
                }
                api.hideProgress();
              }, error: function (xhr, ajaxOptions, thrownError) {
                if (thrownError == "timeout") {
                  alert("操作超时请重试！");
                } else {
                  alert("设备不在线请稍后重试！");
                }
                layer.close(index);
              }
            });
          }
        },
        start_reg: function (prot, relayId) {
          api.showProgress({
            title: '下发指令中，请稍后...',
            modal: false
          });
          $.ajax({
            type: "post",
            //async : false, //同步执行
            timeout: 20000,
            url: BaseServiceUrl + "mobile/equipmenContro/startreglight.json",
            data: {
              ipandprot: prot,
              relayId
            },
            dataType: "json",                                 //返回数据形式为json
            success: function (res) {
              if (res.result == "OK") {
                alert("操作成功！");
                api.hideProgress();
              } else if (res.result == "WrongDevice") {
                alert("设备不在线，请检查设备，或者重启设备！");
                api.hideProgress();
              } else if (res.result == "Timeout") {
                alert("指令已经下达，设备无反馈，请检查设备! ");
                api.hideProgress();
              } else {
                alert("开启失败！请重试! ");
                api.hideProgress();
              }
              api.hideProgress();
            }, error: function (xhr, ajaxOptions, thrownError) {
              if (thrownError == "timeout") {
                alert("操作超时请重试！");
              } else {
                alert("设备不在线请稍后重试！");
              }
              layer.close(index);
            }
          });
        },
        stop_reg: function (prot, relayId) {
          // var index = layer.load(2);
          api.showProgress({
            title: '下发指令中，请稍后...',
            modal: false
          });
          $.ajax({
            type: "post",
            //async : false, //同步执行
            timeout: 20000,
            url: BaseServiceUrl + "mobile/equipmenContro/offreglight.json",
            data: {
              ipandprot: prot,
              relayId: relayId
            },
            dataType: "json",                                 //返回数据形式为json
            success: function (res) {
              if (res.result == "OK") {
                alert("操作成功！");
                api.hideProgress();
              } else if (res.result == "WrongDevice") {
                alert("设备不在线，请检查设备，或者重启设备！");
                api.hideProgress();
              } else if (res.result == "Timeout") {
                alert("指令已经下达，设备无反馈，请检查设备! ");
                api.hideProgress();
              } else {
                alert("关闭失败！请重试! ");
                api.hideProgress();
              }
              api.hideProgress();
            }, error: function (xhr, ajaxOptions, thrownError) {
              if (thrownError == "timeout") {
                alert("操作超时请重试！");
              } else {
                alert("设备不在线请稍后重试！");
              }
              layer.close(index);
            }
          });
        }
      }
    });
  };
</script>

</html>